<template>
	<view class="index_container">
		<!-- 顶部联系方式 -->
		<view class="index_title">
			<view @click="handleWechat" class="offical">微信公众号：曼德呵护科技 <u-icon size="32"
					name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/2394f318ac7a4e56b32cd2c654359cd6agde40fe0x.png"></u-icon>
			</view>
			<view @click="handlePhone" class="offical">联系方式：19357569679 <u-icon size="28"
					name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/19/5ae591652f8545d4aa9042d37233caceqrb9ptu0ex.png"></u-icon>
			</view>
		</view>
		<!-- 机器盒子 -->
		<view class="machine_container">
			<view @click="scaneHandle" class="machine_img1">
				<view class="text">
					扫码机器
				</view>
				<view class="content">
					扫码当前机器即可购买
				</view>
			</view>
			<view @click="toMap" class="machine_img2">
				<view class="sterilize">
					所有机器均已消毒
				</view>
				<view class="text">
					提前选择
				</view>
				<view class="content">
					定位“<text class="red">月事宝盒</text>”,超前购买
				</view>
			</view>
		</view>
		<!-- 用户权益 -->
		<view v-if="showUserCard" class="user_container">
			<view class="user_card">
				<view class="user_title">
					<view class="user_title1">欢迎来到曼德守护~</view>
					<view class="user_title2">赶快登录感受呵护吧</view>
				</view>
				<view class="user_handle">
					<button @click="handleLogin" class="user_button">登录/注册</button>
				</view>
			</view>
		</view>
		<!-- 地图 -->
		<!-- <view class="map_container"> -->
			<!-- @click="handleMap" -->
			<!-- <view class="map_title">
				<view class="map_left">
					<u-icon size="25"
						name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/11/6651c73f9afd4a0bbd5d117de57635603e6usime7e.png"></u-icon>
					<text class="map_desc">{{machineState.name||'请选择机器位置'}} <text
							class="desc_info">（{{getMachineMeters}}）</text>
					</text>
				</view>
				<u-icon size="14"
					name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/11/fbb83ecaad4d4a84afd5894f0ef4378eaaem8lp2li.png"></u-icon>
			</view> -->
			<!-- 地图 -->
<!-- 			<view class="map_card">
				<map class="map" @labeltap="handleClickLabel" @regionchange="handleRegionChange"
					style="width: 100%;height: 500rpx;" :markers="markers" :show-location="true"
					:latitude="location.latitude" :longitude="location.longitude">
				</map>
				<view @click="reHandle" class="mapReloadIcon">
					<u-icon color="#f86853" size="40" name="reload"></u-icon>
				</view>
			</view> -->
		<!-- </view> -->
		<!-- 商城 -->
		<view class="shop_container">
			<view @click="toShop" class="shop_title">
				<view class="shop_left">
					<view class="shop_title1">
						线上商城
					</view>
					<u-icon size="60"
						name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/b3a989d166444a9fbeb9c3372a093fdc7ah3md35fe.png"></u-icon>
				</view>
				<view class="shop_right">
					<view class="shop_title1">
						前往商城
					</view>
					<u-icon size="14"
						name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/11/fbb83ecaad4d4a84afd5894f0ef4378eaaem8lp2li.png"></u-icon>
				</view>
			</view>
			<view class="shop_content">
				<template v-if="shopList.length">
					<view @click="handleDetail(item)" v-for="(item,index) in shopList" :key="index"
						:class="['shop_item','item_active'+index%3]">
						<image class="shop_top_img"
							:src="item.realProductImgUrl"
							mode="widthFix"></image>
						<view class="shop_content">
							{{item.productName}}
						</view>
						<text :class="['shop_price_tip','item_inner_text'+index%3]">
							原价{{parseFloat(item.price)+1}} 现价{{parseFloat(item.price)}}
						</text>
						<view class="shop_price">
							<text class="shop_price_text">预估到手 ￥<text
									class="shop_price_text_inner">{{item.price}}</text></text>
							<u-icon size="20"
								name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/11/ba7c40fb41234beea79c77644e73a690ymto20c03n.png"></u-icon>
						</view>
					</view>
				</template>
				<view v-else style="flex: 1;overflow: hidden;">
					<u-empty iconSize="100" textSize="30" mode="car" text="线上商城数据为空"
						icon="http://cdn.uviewui.com/uview/empty/car.png">
					</u-empty>
				</view>
			</view>
		</view>
		<!-- 咨询 -->
		<view class="news_container">
			<view class="news_title">
				<view class="news_head">
					最新咨询
				</view>
				<view class="news_more">
					<view class="news_desc">
						<!-- 更多 -->
					</view>
					<!-- <u-icon size="12"
						name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/11/fbb83ecaad4d4a84afd5894f0ef4378eaaem8lp2li.png">
					</u-icon> -->
				</view>
			</view>

			<view class="news_line"></view>
			<!-- <view class="swiper_card"> -->
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image @click="handleClickImage(item.url)" :src="item.image"></image>
				</swiper-item>
			</swiper>
			<!-- </view> -->
		</view>
	</view>
</template>
<script>
	import { getShopList } from '../../api';
	import {
		getMachineListByLocation
	} from '@/api/map.js'
	import {
		toLogin
	} from '@/libs/login.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		onPageScroll(e) {
			if (this.uid) return
			if (e.scrollTop >= 100) {
				this.showUserCard = false
			} else {
				this.showUserCard = true
			}
		},
		computed: {
			...mapGetters(['isLogin', 'uid', 'userInfo', 'machineState']),
			getMachineMeters() {
				return this.machineMeters ? '距您' + this.machineMeters + '米' : '距离数据暂无'
			}
		},
		methods: {
			handleWechat() {
				wx.showToast({
					title: '公众号模块建设中',
					icon: 'none'

				})
			},
			handlePhone() {
				uni.makePhoneCall({
					phoneNumber: '19357569679',
					success: (res) => {}
				})
			},
			getMachineList() {
				getMachineListByLocation({
					longitude: 120.575026,
					latitude: 29.994827,
					...this.query
				}).then(res => {
					this.machineList.push(...res.data.list.map(item => {
						return {
							...item,
							distance: (item.distance + "").slice(0, 4)
						}
					}))
					this.markers.push(...res.data.list.map(item => {
						let length = item.name.split("").length
						return {
							id: item.mid,
							longitude: item.lon,
							latitude: item.lat,
							iconPath: '',
							label: {
								content: item.name,
								color: '#000',
								fontSize: 12,
								anchorX: -6 * length - 5,
								anchorY: -70,
								bgColor: '#fff',
								borderRadius: 10,
								padding: 6
							},
							width: '30',
							height: '45'
						}
					}))
					this.empty = !res.data.total
					this.status = this.machineList.length >= res.data.total ? 3 : 2;
					this.query.pageNum++
				})
			},
			handleClickLabel(e) {
				// 视角移至当前位置
				let mark = this.markers.find(item => item.id === e.detail.markerId)
				this.myLocation.latitude = mark.latitude - 0.0027
				this.myLocation.longitude = mark.longitude + 0.0039
				// 获取选中的machine，存到store
				wx.showModal({
					title: '选中提示！',
					content: '当前选中机器为:\n' + mark.label.content + ' \n是否确认选择该台机器？',
					success: (res) => {
						if (res.confirm) {
							let selectMachine = this.machineList.find(item => item.mid == e.detail.markerId)
							if (selectMachine != undefined) {
								this.$store.dispatch('setMachine', selectMachine)
								// 计算距离
								// lat1 lon1 lat2 lon2
								let meters = this.haversineDistance(this.backLocation.latitude, this
									.backLocation.longitude, selectMachine.lat, selectMachine.lon)
								this.machineMeters = meters.toFixed(2)
								wx.showToast({
									title: '选择成功',
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/tabBar/shop'
									})
								}, 100)
							}
						}
					}
				})
			},
			handleClickImage(url){
				uni.navigateTo({
					url:`/pages/index/webview/webview?url=${url}`,
				})
			},
			haversineDistance(lat1, lon1, lat2, lon2) {
				const toRadians = (degree) => (degree * Math.PI) / 180;
				const R = 6371;
				// 转换经纬度为弧度
				const φ1 = toRadians(lat1);
				const φ2 = toRadians(lat2);
				const Δφ = toRadians(lat2 - lat1);
				const Δλ = toRadians(lon2 - lon1);

				// Haversine 公式
				const a = Math.sin(Δφ / 2) ** 2 +
					Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) ** 2;
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = R * c;

				return distance * 1000; // 单位转换为米
			},
			// 视野发生变化时触发
			handleRegionChange(e) {
				// console.log(e, 'handleRegionChange');
			},
			init() {
				let that = this
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				uni.getSetting({
					success(res) {
						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									uni.getLocation({
										type: 'wgs84',
										success: function(res) {
											that.location.latitude = res.latitude - 0.0027
											that.location.longitude = res.longitude + 0.0039
											that.myLocation = that.location
											that.backLocation = JSON.parse(JSON.stringify(that
												.myLocation))
										}
									})
								}
							})
						} else {
							// 有权限则直接获取
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									that.location.latitude = res.latitude - 0.0027
									that.location.longitude = res.longitude + 0.0039
									that.myLocation = that.location
									that.backLocation = JSON.parse(JSON.stringify(that.myLocation))
								}
							})
						}
					}
				})
			},
			handleDetail(item) {
				let jsonString = JSON.stringify(item)
				let encodeURIComponentStr = encodeURIComponent(jsonString)
				uni.navigateTo({
					url: `/pages/index/detail/detail?item=${encodeURIComponentStr}`
				})
			},
			handleMap() {
				uni.navigateTo({
					url: '/pages/index/map/map'
				})
			},
			handleLogin() {
				toLogin()
			},
			scaneHandle() {
				uni.scanCode({
					success: (res) => {
						let mid = decodeURIComponent(res.result).split("=")[1]
						console.log(mid)
						this.$store.dispatch('setMachine', {mid})
						this.toShop()
					}
				})
			},
			toShop() {
				uni.switchTab({
					url: '/pages/tabBar/shop'
				})
			},
			toMap(){
				uni.navigateTo({
					url: '/pages/index/map/map'
				})
			},
			// 重置当前位置为初始位置
			reHandle() {
				this.myLocation.latitude = this.backLocation.latitude
				this.myLocation.longitude = this.backLocation.longitude
			}
		},
		mounted() {
			// this.init()
			// this.getMachineList()
			if (!Object.keys(this.machineState).length) {
				wx.showToast({
					title: '请选择机器位置',
					icon: 'none',
					duration: 5000
				})
			}
			this.$store.dispatch("setMachine",{mid:1703514087})
		},
		onShow() {
			if (this.uid) {
				this.showUserCard = false
			} else {
				this.showUserCard = true
			}
			getShopList({
				page: 1,
				limit: 10,
				mId: this.$store.getters.machineState.mid ? this.$store.getters.machineState.mid : '1703514087'
			}).then(res=>{
				this.shopList = res.data.list;
			})
		},
		data() {
			return {
				markers: [],
				myLocation: {},
				backLocation: {},
				location: {
					latitude: '', //纬度
					longitude: '' //经度
				},
				query: {
					pageSize: 100,
					pageNum: 1,
					machineName: ""
				},
				machineList: [], //机器的所有位置
				machineMeters: '', //所选机器和当前位置的距离

				swiperList: [{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/4549d4716c9e4773bdf1bf9f679a863dc50vc5hk78.png",
					url:"https://mp.weixin.qq.com/s/9st1sBgnFGPN8OjDXbf_KA",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/dd6f6308f7ae442c94d15228a4b225d9ahmkqhbr2z.png",
					url:"https://mp.weixin.qq.com/s/oB6zSpW3xyl4RiP9RnrNhg",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/c6ec94c1af834461a4dfbf5e2942ef7d565vyf5wn7.png",
					url:"https://mp.weixin.qq.com/s/9oNsq9iY_YgnszUmITdGFQ",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/5ec13316bab443978f92d6b343c0f15357zgk45l42.png",
					url:"https://mp.weixin.qq.com/s/52sy6OF0314zV05Vs-U8dw",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/2ec3fefdd8654dedad5d5285b2e0a80f6risyzsjqs.png",
					url:"https://mp.weixin.qq.com/s/8PI_2BmeWangMGnTYUS1gQ",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/3a37316c0d2348cbb25979c3dd21661530s85ylhc2.png",
					url:"https://mp.weixin.qq.com/s/5NTFgL9TUJgO8TQ3p-H6ow",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/3c87b7def75c44cb902dadd02c9a455c54y5iz9v3h.png",
					url:"https://mp.weixin.qq.com/s/HC2ajrD_xZncBTKE4cBmcQ",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/81804a3de7d7446d8c1c725fcf9c34f4srvh97g46z.png",
					url:"https://mp.weixin.qq.com/s/DirlKRaObbqxaZvO96TgCQ",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/bb457a3c096f40d48638fcb40f0412efhou1aigeer.png",
					url:"https://mp.weixin.qq.com/s/fDeRvjh1ISH-uRFfWZMkYw",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/c6a216b294b546d48ce11fcd06a3f210xl3m9vqt86.png",
					url:"https://mp.weixin.qq.com/s/LOVU2NLe_AD6HhpewILVkw",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/e9bd3cf1ec8c48acac5f31a1e44f24fdmjb89x8zz3.png",
					url:"https://mp.weixin.qq.com/s/CIZED3yzVHJeUoOwUut7Rw",
				},{
					image:"https://yueshibaohe.com:443/crmebimage/public/maintain/2024/12/18/a2f9227944744d4db6013bcc7a786c8eesm80q35x5.png",
					url:"https://mp.weixin.qq.com/s/zA0b03w_0v7kBw7M_S1-Sw",
				}],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				shop_info_active: ['shop_active_green', 'shop_active_orange', 'shop_active_blue'],
				showUserCard: false,
				shopList: []
			}
		}
	}
</script>
<style lang="scss" scoped>
	.index_container {
		background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/bef8bf2ea4ee496eabc3e0a23cb0ed123ec0h3bctq.png');
		background-repeat: no-repeat;
		background-size: cover;
		// background-position: center;
		min-height: 100vh;
		overflow-y: auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 30rpx 30rpx;
		position: relative;
		font-family: 'Helvetica Neue', Arial, sans-serif;

		.index_title {
			margin-top: 330rpx;
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			text-align: center;

			.offical {
				display: flex;
				align-items: center;
				column-gap: 12rpx;
				color: #FCA1A0;
				font-size: 0.8rem;
			}
		}
		
		.index_title ::v-deep image{
			height: 12px !important;
		}

		.machine_container {
			width: 100%;
			margin-top: 30rpx;
			height: 400rpx;
			display: flex;

			.machine_img1 {
				width: 50%;
				height: 433rpx;
				position: relative;
				background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/35b44150c72a482dab2d590495de0851do5x4vjnlr.png');
				// background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/15/fd74d9beca6748669ad14d07db3fccc7bljfrb8cw9.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				
				.text{
					position: absolute;
					left: 55%;
					top: 180rpx;
					transform: translateX(-50%);
					font-weight: 600;
					font-size: 36rpx;
				}
				
				.content{
					position: absolute;
					font-size: 18rpx;
					left: 55%;
					top: 240rpx;
					width: 100%;
					transform: translateX(-50%);
					text-align: center;
					margin-left: 4rpx;
				}
			}

			.machine_img2 {
				width: 50%;
				height: 420rpx;
				background-image:url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/e385a9a900064a41bef3dc18717a0f3fadylxm73ba.png');
				// background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/15/3bf7887467e74685a2985b46a479e49afwfh0jpubh.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;
				transform: translateY(26px);
				
				.sterilize{
					text-align: center;
					position: absolute;
					top: -49rpx;
					background-color: #feedf0;
					width: 89%;
					border-radius: 10rpx 10rpx 0 0;
					padding: 12rpx;
					margin-left: 34rpx;
					font-size: 22rpx;
					font-weight: 600;
					color: #fa9284;
				}
				
				.text{
					position: absolute;
					left: 55%;
					top: 30rpx;
					transform: translateX(-50%);
					font-weight: 600;
					font-size: 36rpx;
				}
				
				.content{
					position: absolute;
					font-size: 18rpx;
					left: 55%;
					top: 90rpx;
					width: 100%;
					transform: translateX(-50%);
					text-align: center;
					margin-left: 4rpx;
				}
				.red{
					color: #f98070;
				}
			}
		}

		.user_container {
			position: fixed;
			bottom: 40rpx;
			z-index: 9999;
			width: 88%;
			height: 120rpx;
			background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/cec5ccba0ce140e88eb8ced5552addbc7a3e35xapi.png');
			background-size: 100% 100%;
			box-shadow: #ccc 0rpx 8rpx 20rpx;
			border-radius: 20rpx;
			opacity: .9;
			transition: display 0.3s ease;

			.user_card {
				margin-left: 20%;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				gap: 20rpx;
				line-height: 100%;
				height: 100%;

				.user_title {
					flex-direction: column;
					align-items: center;

					.user_title1 {
						font-size: 0.95rem;
						font-weight: 580;
						margin: 12rpx 0;
					}

					.user_title2 {
						font-size: 0.65rem;
						margin: 10rpx 0;
					}
				}

				.user_handle {
					.user_button {
						padding: 13rpx 22rpx;
						background-color: #F86853;
						font-size: 26rpx;
						border-radius: 30rpx;
						color: #fff;
						letter-spacing: 0.1rem;
					}

					.user_button:active {
						background-color: #f84829;
					}
				}
			}
		}

		.map_container {
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			margin-top: 30rpx;
			border-radius: 20rpx;

			.map_title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.map_left {
					display: flex;
					gap: 20rpx;
					letter-spacing: 0.09rem;

					.map_desc {

						.desc_info {
							color: #F86853;
						}
					}
				}
			}

			.map_card {
				margin-top: 30rpx;
				min-height: 400rpx;
				position: relative;

				.map {
					width: 100%;
					height: 400rpx;
					box-shadow: 0 0 12rpx 6rpx #ccc;
				}

				.mapReloadIcon {
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 9999;
				}
			}
		}

		.shop_container {
			background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/26/e22e51e558e547c5b049e6e9cc04fb9fz3xpa19k46.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			// height: 500rpx;
			width: 104%;
			margin: 50rpx 0 0;
			padding: 0 18rpx 30rpx 30rpx;

			.shop_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 50rpx;
				letter-spacing: 0.11rem;

				.shop_left {
					display: flex;
					align-items: center;
					gap: 20rpx;

					.shop_title1 {
						font-size: 1.2rem;
						font-weight: 550;
						text-indent: 0.4rem;
					}
				}

				.shop_right {
					display: flex;
					align-items: center;
					gap: 10rpx;
					margin-right: 30rpx;

					.shop_title1 {
						font-size: 0.8rem;
						color: #7C7C7C;

					}
				}
			}

			.shop_content {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 20rpx;
				overflow-x: scroll;

				.shop_item {
					flex: 0 0 32%;
					margin: 0.5% 3%;
					padding: 10rpx 0;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					flex-direction: column;
					box-shadow: 5rpx 5rpx 10rpx 1rpx #ccc;



					.shop_top_img {
						width: 94%;
						margin: 0 auto;
						border-radius: 10rpx;
						opacity: .8;
					}

					.shop_content {
						font-size: 0.55rem;
						padding: 10rpx;
						letter-spacing: 0.1rem;
						display: -webkit-box;
						text-align: center;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
					}

					.shop_price_tip {
						margin: 0 auto;
						overflow: hidden;
						font-size: 0.5rem;
						text-align: center;
						padding: 6rpx 12rpx;
						border-radius: 6rpx;
					}

					.shop_price {
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						padding: 10rpx 0;

						.shop_price_text {
							letter-spacing: 0.085rem;
							font-size: 0.55rem;
							font-weight: 550;

							.shop_price_text_inner {
								font-size: 0.8rem;
							}
						}
					}
				}

				// 绿
				.item_active0 {
					background: linear-gradient(to bottom, #eafced, #e4fde6, #fbfffb);
				}

				// 粉红
				.item_active1 {
					background: linear-gradient(to bottom, #fef6f6, #fdf3f2, #fffdfc);
				}

				// 蓝
				.item_active2 {
					background: linear-gradient(to bottom, #f1f7ff, #e5f0ff, #fafcff);
				}

				.item_inner_text0 {
					background-color: #d5fdda;
					color: #54c55f;
				}

				.item_inner_text1 {
					background-color: #fcd1cd;
					color: #f86665;
				}

				.item_inner_text2 {
					background-color: #c6defc;
					color: #4097fd;
				}

				.shop_item:first-child {
					margin: 0.5% 3% 0.5% 0;
				}
			}
		}

		.news_container {
			width: 100%;
			height: 420rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;

			.news_title {
				gap: 20rpx;

				.news_head {
					text-align: center;
					margin-top: 20rpx;
					padding: 20rpx;
					width: 30%;
					border-radius: 25rpx 25rpx 0rpx 0;
					background-color: #fff;
					font-weight: 550;
					font-size: 32rpx;
					margin-bottom: -37rpx;
					letter-spacing: 4rpx;
					padding-top: 10rpx;
				}

				.news_more {
					background-color: #fff;
					gap: 10rpx;
					height: 24rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					border-radius: 20rpx 20rpx 0 0;
					padding: 5rpx 30rpx;
					
					.news_desc{
						color: #a2a2a2;
						font-size: 22rpx;
					}
				}
			}

			.news_line {
				background-color: #da9e99;
				height: 6rpx;
				width: 100%;
				margin-bottom: 10rpx;
			}

			.swiper{
				padding-bottom: 20rpx;
				
				image{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
